<div class="self-check-list">
  <div class="self-check-list-head">
    <span class="head-left">
      <!-- <nz-breadcrumb nzSeparator=">">
        <nz-breadcrumb-item>
          项目
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
          {{name}}
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
          日常巡检
        </nz-breadcrumb-item>
      </nz-breadcrumb> -->
      <a [routerLink]="['/outer/project-type']" class="breadcrumb">
        项目
      </a>
      <i nz-icon type="right" theme="outline"></i>
      <a (click)="routeToSurvey()" class="breadcrumb">
        {{name}}
      </a>
      <b>
        <i nz-icon type="right" theme="outline"></i>
        自检详情
      </b>
    </span>
    <span class="common-table-filter head-right">
      <form nz-form [nzLayout]="'inline'">
        <nz-form-item>
          <nz-form-control>
            <nz-select style="width: 120px;" [(ngModel)]="searchModel.stauts" name="stauts" nzAllowClear
              nzPlaceHolder="状态">
              <nz-option nzValue="1" nzLabel="整改中"></nz-option>
              <nz-option nzValue="2" nzLabel="已整改"></nz-option>
              <nz-option nzValue="3" nzLabel="通过"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control>
            <nz-date-picker nzShowTime nzFormat="yyyy-MM-dd" [(ngModel)]="formInfo.startValue" name="startValue"
              nzPlaceHolder="开始时间" (ngModelChange)="onStartChange($event)">
            </nz-date-picker>
            <span> - </span>
            <nz-date-picker nzShowTime nzFormat="yyyy-MM-dd" [(ngModel)]="formInfo.endValue" name="endValue"
              nzPlaceHolder="结束时间" (ngModelChange)="onEndChange($event)">
            </nz-date-picker>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control>
            <nz-form-control>
              <!-- <button class="btn-export-report" nz-button [nzType]="'primary'" style="background: gray;border-color: gray;">导出报表</button> -->
            </nz-form-control>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control>
            <button (click)="getPageInfo()" nz-button [nzType]="'primary'">搜索</button>
          </nz-form-control>
        </nz-form-item>
      </form>
    </span>
  </div>
  <div class="self-check-list-body">
    <!-- <div> -->
    <div class="body">
      <nz-table #rowSelectionTable [nzData]="recordList" [nzShowPagination]="false">
        <thead>
          <tr>
            <th nzShowCheckbox [(nzChecked)]="allChecked" (nzCheckedChange)="checkAll($event)"></th>
            <th>序号</th>
            <th>检查名称</th>
            <th>检查人</th>
            <th>通知人</th>
            <th>检查日期</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of rowSelectionTable.data let i=index" (click)="getDetail(data.id)"
            style="cursor: pointer">
            <td (click)="$event.stopPropagation();" nzShowCheckbox [(nzChecked)]="data.checked"
              (nzCheckedChange)="refreshCheckboxStatus()"></td>
            <td>{{i+1}}</td>
            <td class="hidden-row ">{{ data.content }}</td>
            <td class="hidden-row "> <span *ngFor="let item2 of data.checkUserNames"> {{ item2 }} </span></td>
            <td class="hidden-row "> <span *ngFor="let item2 of data.notifyUserNames"> {{ item2 }} </span></td>
            <td class="hidden-row ">
              {{ data.creationTime == "1970-01-01T00:00:00"?'-':data.creationTime | DateTransformPipe }}</td>
            <td
              [ngClass]="data.status == 3 ? 'common-table-status-green' : data.status == 2 ? 'common-table-status-orange': data.status == 1 ?'common-table-status-red' : data.status == 4 ? 'common-table-status-gray' :'common-table-status-red'">
              {{ data.status == 1 ? '整改中' : data.status == 2 ? '已整改' : data.status == 3 ? '已完成' : data.status == 4 ? '已撤销':''}}
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
    <div class="pager">
      <!-- <span class="common-pager-helper"><button nz-button [nzType]="'primary'" [nzSize]="'small'"
            (click)="deleteLot()">
            批量删除
          </button></span> -->
      <nz-pagination [(nzPageIndex)]="nzPageIndex" [(nzPageSize)]="searchModel.maxResultCount" [(nzTotal)]="nzTotal"
        (nzPageIndexChange)="pageChange($event)" nzShowQuickJumper [nzShowTotal]="totalTemplate"></nz-pagination>
      <ng-template #totalTemplate let-total>
        共{{nzTotal}}条
      </ng-template>
    </div>
    <!-- </div> -->
  </div>
  <!-- 弹窗 -->
  <nz-modal class="self-check-modal" [(nzVisible)]="isModalVisible" [nzContent]="addModalContent" [nzWidth]="800"
    [nzMaskClosable]="false" [nzFooter]="null" (nzOnCancel)="closemodal()" nzTitle="项目部自检">
    <ng-template #printer>
      <!-- <i nz-icon type="printer" theme="outline"></i> -->
    </ng-template>
    <ng-template #addModalContent>
      <div class="self-check-list">
        <div class="self-check-title">
          <div class="self-check-title-no">编号：{{detailInfo.displayNumber}}</div>
          <div class="self-check-status"
            [ngClass]="detailInfo.status == 1 ? 'self-check-status-error':'self-check-status-success' ">
            状态： {{detailInfo.status == 1 ? '已通知' : '已整改'}}</div>
        </div>
        <div class="self-check-detail">
          <div class="self-check-detail-item" nz-row>
            <div nz-col nzSpan="8">检查人：<span *ngFor="let person of detailInfo.checkUserNames">{{ person }}&nbsp;</span>
            </div>
            <div nz-col nzSpan="8">通知人：<span *ngFor="let person of detailInfo.notifyUserNames">{{ person }}&nbsp;</span>
            </div>
            <!-- <div nz-col nzSpan="8">
              性质：<span *ngFor="let item of detailInfo.securityChecksPropertyNames">{{item}}</span></div> -->
            <div nz-col nzSpan="8">
              检查日期：{{ detailInfo.creationTime == "1970-01-01T00:00:00"?'-':detailInfo.creationTime | DateTransformPipe }}
            </div>
          </div>

        </div>
      </div>
      <div class="self-check-list">
        <div class="self-check-title">检查内容</div>
        <div class="self-check-detail">
          <pre>{{detailInfo.content}}</pre>
        </div>
      </div>
      <div class="self-check-list">
        <div class="self-check-title">附件</div>
        <div class="self-check-detail" *ngIf="annex.length !=0">

          <div class="img" *ngFor="let url of annexForImg"
            style="display:inline-block;padding:10px;margin-right: 10px;vertical-align: top;cursor: pointer;border-radius: 3px;">
            <img (click)='viewImg(url)' width="120px" height="120px" [src]='url' alt="">
            <!-- <nz-modal [(nzVisible)]="isviewImg"  (nzOnCancel)="handleCancel()">
                  <img  [src]='url' alt="">
                </nz-modal> -->

          </div>
          <div *ngIf="annexForVideo.length !=0" class="video"
            style="padding:10px;display:inline-block;margin-right: 10px;vertical-align: top;cursor: pointer;border-radius: 3px;">
            <video controls="controls" height="120px" width="120px" *ngFor="let url of annexForVideo">
              <source [src]='url' [ngStyle]="{ 'width': '100%' }" type="video/mp4" />
            </video>
          </div>

        </div>

      </div>
      <div class="self-check-list">
        <!-- <div class="self-check-title">整改要求</div> -->
        <div class="self-check-detail">
          <!-- <div class="self-check-detail-item">{{detailInfo.correctOrder}}</div> -->
          <div nz-row>
            <!-- <div nz-col nzSpan="8">整改人：<span *ngFor="let item1 of detailInfo.correctCreatorUserName" ></span> {{item1}}</div>  -->
            <!-- <div nz-col nzSpan="8">整改期限：{{detailInfo.correctDate == "1970-01-01T00:00:00"?'-':detailInfo.correctDate | DateTransformPipe}}</div> -->
            <div nz-col nzSpan="8">抄送人：<span *ngFor="let ccpeo of detailInfo.ccUserNames">{{ccpeo}}&nbsp;</span></div>
          </div>
        </div>
      </div>

      <!-- <div *ngFor="let item of detailInfo.checkAndFeedbacksList; let i = index" class="self-check">
        <div class="self-check-index">{{i+1}}</div>
        <div class="self-check-info">
          <div *ngIf="item.type == 1">
            <div class="self-check-top">
              <div>整改人:   <span *ngFor="let ii of item.notifyUserNames">{{ii}}</span>  </div>
              <div class="self-check-status-img"
                [ngClass]="item.status ? 'self-check-status-success-img' : 'self-check-status-error-img'">
              </div>
            </div>
            <div class="self-check-bottom">
              <div>{{item.content}}</div>
              <div>{{item.creationTime == "1970-01-01T00:00:00"?'-':item.creationTime | DateTransformPipe}}</div>
            </div>
          </div>
          <div *ngelse>
            <div class="self-check-top">
              <div>复检人：{{item.creatorUserName}}</div>
            </div>
            <div class="self-check-bottom">
              <div>{{item.content}}</div>
              <div>{{item.creationTime == "1970-01-01T00:00:00"?'-':item.creationTime | DateTransformPipe}}</div>
            </div>
          </div>
        </div>
      </div> -->
    </ng-template>
  </nz-modal>
</div>

<!-- 附件预览 -->
<nz-modal nzWidth='70%' [nzVisible]="isviewImg" [nzContent]="modalContent" [nzFooter]="null"
  (nzOnCancel)="handleCancel()">
  <ng-template #modalContent>
    <img [src]='curl' [ngStyle]="{ 'width': '100%' }" />
  </ng-template>
</nz-modal>